class Color6 extends HTMLElement {

  /**
   * 颜色控件
   */
  constructor() {

    super();

    //隔离样式和脚本
    this.#root = this.attachShadow({ mode: "closed" });
    this.style.display = "none";

    //使canvas的画布能链式配置属性
    if (!CanvasRenderingContext2D.prototype.attr) {
      CanvasRenderingContext2D.prototype.attr = function (name, value) {
        let al = arguments.length;
        //如果只有一个参数，且参数是一个object，则取key为属性名，value为属性值
        if (al === 1 && name.constructor === Object) {
          for (let key in name) {
            this[key] = name[key];
          }
        }
        //如果有两个以上的参数，则第n个参数为属性名，第n+1个参数为属性值
        else if (al >= 2) {
          for (let i = 0; i < al - 1; i = i + 2) {
            this[arguments[i]] = arguments[i + 1];
          }
        }
        return this;
      }
    }

    //使canvas的画布能链式调用方法
    if (!CanvasRenderingContext2D.prototype.do) {
      CanvasRenderingContext2D.prototype.do = function (name, ...args) {
        if (this[name]) {
          this[name](...args);
        }
        return this;
      }
    }

  }

  /**
   * 控件连接到dom时
   */
  connectedCallback() {
    //强制挂载到document下，与body平级
    if (this.parentElement !== document.documentElement) {
      document.documentElement.appendChild(this);
    }
  }

  /**
   * 样式
   */
  static style = `
    <style>
      :host{
        position:absolute;display:block;
        width:220px;border:1px solid lightgray;
        box-sizing:border-box;font-size:14px;background-color:#ffffff;
        box-shadow:0px 0px 5px lightgray;
      }
      *{box-sizing:border-box;font-size:14px}
      input[type=number] {width:45px;height:25px;outline:none;}
      input[type="number"]::-webkit-inner-spin-button,
      input[type="number"]::-webkit-outer-spin-button {margin-right:-5px;padding:0px;}
      input[type=range]{
        width:135px;height:10px;
        background-size: 100%;
        background-repeat:no-repeat;
        outline:none;
        -webkit-appearance:none;
        margin-left:0px;
        border-radius:5px;
      }
      input[type=range]::-webkit-slider-thumb {
        width: 12px;
        height: 12px;
        border-radius: 100%;
        background-color: #ffffff;
        cursor: pointer;
        -webkit-appearance: none;
        border: 1px solid #000000;
      }
      
      nav{display:flex;height:30px;align-items:center;justify-content:space-around;}
      nav label{cursor:pointer;padding-left:2px;padding-right:2px;}
      .tab-active{color:#0085F2;background-color:#fff; border-bottom:1px solid #0085F2;font-weight:bolder}

      article{display:block;text-align:center;margin-left:5px;margin-right:5px;}
      article:last-child{margin-bottom:5px;}
      article>div{display:flex;height:30px;align-items:center;justify-content:space-between;}

      #standard {display:flex;flex-direction:column;margin-top:5px;margin-bottom:5px;}
      #standard div {display: flex;margin-bottom: 1px;height: 14px;}
      #standard div span {display:inline-block;width:16px;height:16px;margin-right:1px;cursor:pointer;}

      #lately{display:flex;align-items:center;justify-content:space-between;}
      #lately span{width:16px;height:16px;border-radius:0%;border:1px solid lightgray;cursor:pointer;margin-left:1px;}

      #rangeR{background-image:linear-gradient(to right,#ff000000 0%,#ff0000ff 100%);}
      #rangeG{background-image:linear-gradient(to right,#00ff0000 0%,#00ff00ff 100%);}
      #rangeB{background-image:linear-gradient(to right,#0000ff00 0%,#0000ffff 100%);}
      #rangeA{background-image:linear-gradient(to right,#00000000 0%,#000000ff 100%);}
      #rangeSaturation{border:1px solid #000;background-image:linear-gradient(to right,#00000000 0%,#000000ff 100%);}
      #rangeLightness{border:1px solid #000;background-image:linear-gradient(to left,#00000000 0%,#000000ff 100%);}
      #demo{width:40px;height:40px;border-radius:100%;background-color:#000;border:1px solid #000;}
    
    </style>
  `;

  /**
   * 内容
   */
  static html = `

    <nav id="nav" style="background-color:#F9F9FB">
      <label t="hsl" class="tab tab-active">HSL</label>
      <label t="rgb" class="tab">RGB</label>
      <label t="base" class="tab">标准</label>
      <label t="saturation" class="tab">饱和</label>
      <label t="lightness" class="tab">明暗</label>
    </nav>

    <article id="hsl" class="tab-content">
      <canvas id="canvasHSL" width="200" height="200"></canvas>
    </article>

    <article id="rgb" class="tab-content" style="display:none;">
      <div>
        <label>红</label>
        <input id="numberR" type="number" min="0" max="255" step="1" value="0" />
        <input id="rangeR" type="range" min="0" max="255" step="1" value="0" />
      </div>
      <div>
        <label>绿</label>
        <input id="numberG" type="number" min="0" max="255" step="1" value="0" />
        <input id="rangeG" type="range" min="0" max="255" step="1" value="0" />
      </div>
      <div>
        <label>蓝</label>
        <input id="numberB" type="number" min="0" max="255" step="1" value="0" />
        <input id="rangeB" type="range" min="0" max="255" step="1" value="0" />
      </div>
    </article>

    <article class="tab-content" id="base" style="display:none;">
      <div id="standard" style="height:auto;"></div>
    </article>

    <article class="tab-content" id="saturation" style="display:none;">
      <canvas id="canvasSaturation" width="203" height="203"></canvas>
      <div>
        <label>饱和程度</label>
        <input id="rangeSaturation" type="range" value="100" min="0" max="100" step="1" >
      </div>
    </article>

    <article class="tab-content" id="lightness" style="display:none;">
      <canvas id="canvasLightness" width="203" height="203"></canvas>
      <div>
        <label>明暗程度</label>
        <input id="rangeLightness" type="range" min="0" max="100" step="1" >
      </div>
    </article>

    <article>
      <div>
        <label>最近</label>
        <div id="lately"></div>
      </div>
    </article>

    <article id="confirm">
      <div>
        <label>不透明度</label>
        <input id="rangeA" type="range" min="0" max="1" step="0.1" value="1" />
      </div>
      <div>
        <label>十六进制</label>
        <input id="textHEX" style="width:120px;" type="text" />
      </div>
      <div style="height:auto;align-items:flex-end;">
        <label id="demo"></label>
        <div style="display:flex;">
          <input id="buttonGetColor" type="button" value="吸管">
          <input id="buttonConfirm" type="button" value="确定" style="margin-left:5px;" />
          <input id="buttonCancle" type="button" value="取消" style="margin-left:5px;" />
        </div>
      </div>
    </article>
    `;

  /**
   * 标准颜色
   */
  static standardColors = [
    ["#8B0000", "#A52A2A", "#DC143C", "#FF0000", "#C71585", "#D87093", "#FF1493", "#FF00FF", "#FF69B4", "#FFC0CB", "#FFB6C1", "#FFE4E1"],
    ["#2F4F4F", "#556B2F", "#808000", "#006400", "#228B22", "#2E8B57", "#008080", "#20B2AA", "#66CDAA", "#3CB371", "#8FBC8F", "#9ACD32"],
    ["#32CD32", "#00FF00", "#7FFF00", "#7CFC00", "#ADFF2F", "#00FA9A", "#00FF7F", "#90EE90", "#98F898", "#7FFFD4", "#F0FFF0", "#F0FFF8"],
    ["#191970", "#000080", "#00008B", "#483D8B", "#0000CD", "#4169E1", "#1E90FF", "#6495ED", "#00BFFF", "#87CEFA", "#B0C4DE", "#ADD8E6"],
    ["#4682B4", "#008B8B", "#5F9EA0", "#00CED1", "#48D1CC", "#40E0D0", "#87CECB", "#B0E0E6", "#AFEEEE", "#E0FFFF", "#F0FFFF", "#F0F8FF"],
    ["#4B0082", "#800080", "#8B008B", "#9932CC", "#8A2BE2", "#9400D3", "#6A5ACD", "#9370DB", "#7B68EE", "#BA55D3", "#EE82EE", "#DDA0DD"],
    ["#8B4513", "#A0522D", "#D2691E", "#CD5C5C", "#BC8F8F", "#F08080", "#FA8072", "#FFA07A", "#FF4500", "#FF6347", "#FF7F50", "#FF8C00"],
    ["#F4A460", "#CD853F", "#D2B48C", "#DEB887", "#B8860B", "#DAA520", "#FFD700", "#FFFF00", "#BDB76B", "#F0E68C", "#EEE8AA", "#FFFFE0"],
    ["#F5DEB3", "#FFE4B5", "#FFDEAD", "#FFDAB9", "#FFE4C4", "#FAEBD7", "#FFEFD5", "#FFF8DC", "#FDF5E6", "#FAF0E6", "#FFF5EE", "#FFFFF0"],
    ["#000000", "#696969", "#808080", "#708090", "#778899", "#A9A9A9", "#C0C0C0", "#D3D3D3", "#DCDCDC", "#F5F5F5", "#F8F8FF", "#FFFFFF"]
  ];

  /**
   * 缓存的键
   */
  static localStrorageKey = "color6_lately_$$___3435_B9_C6_a3";

  /**
   * 缺省的最近使用颜色
   */
  static latelyColors = ["#FF0000", "#00FF00", "#0000FF", "#FFFF00", "#9400D3", "#FF8C00", "#40E0D0", "#000000", "#A9A9A9", "#FFFFFF"];

  #root = null;     //根节点

  #rendered = false;  //是否已经渲染过

  #color = { H: 0, S: 100, L: 50, R: 255, G: 0, B: 0, A: 1 };  //色值

  #colorType = "hsl";

  #q = selector => this.#root.querySelector(selector);

  #qa = selector => this.#root.querySelectorAll(selector);

  #byid = id => this.#root.getElementById(id);

  #attr = (ele, key) => ele.getAttribute(key);

  /**
   * 获取颜色值
   * @returns 
   */
  getColor = () => {
    let value = JSON.parse(JSON.stringify(this.#color));
    value.rgb = `rgb(${value.R},${value.G},${value.B})`;
    value.rgba = `rgba(${value.R},${value.G},${value.B},${value.A})`;
    value.hsl = `hsl(${value.H},${value.S * 100}%,${value.L * 100}%)`;
    value.hsla = `hsl(${value.H},${value.S * 100}%,${value.L * 100}%,${value.A})`;
    value.hex = Color6.rgbToHex(value.R, value.G, value.B);
    value.hexa = Color6.rgbToHex(value.R, value.G, value.B, value.A);
    return value;
  }

  /**
   * 颜色相关的正则表达式
   */
  static regExp = {

    //rgb(0,0,0)
    rgb: /^rgb\(\d{1,3},\d{1,3},\d{1,3}\)$/,

    //rgba(0,0,0,.5)
    rgba: /^rgba\(\d{1,3},\d{1,3},\d{1,3},(\d?\.)?\d+\)$/,

    //hsl(100,50%,50%)
    hsl: /^hsl\(\d{1,3},\d{1,3}%,\d{1,3}%\)$/,

    //hsla(100,50%,50%,.5)
    hsla: /^hsla\(\d{1,3},\d{1,3}%,\d{1,3}%,(\d?\.)?\d+\)$/,

    //#00aaff
    hex: /^#[0-9a-fA-F]{6}$/,

    //#00aaff00
    hexa: /^#[0-9a-fA-F]{8}$/

  }

  /**
   * 将hsl颜色转rgb颜色
   * @param {Number} hue 色调
   * @param {Number} sat 饱和度
   * @param {Number} light 亮度
   * @returns 
   */
  static hslToRgb(hue, sat, light) {
    function hueToRgb(t1, t2, hue) {
      if (hue < 0) hue += 6;
      if (hue >= 6) hue -= 6;
      if (hue < 1) return (t2 - t1) * hue + t1;
      else if (hue < 3) return t2;
      else if (hue < 4) return (t2 - t1) * (4 - hue) + t1;
      else return t1;
    }
    let t1, t2, r, g, b;
    hue = hue / 60;
    if (light <= 0.5) {
      t2 = light * (sat + 1);
    } else {
      t2 = light + sat - (light * sat);
    }
    t1 = light * 2 - t2;
    r = hueToRgb(t1, t2, hue + 2) * 255;
    g = hueToRgb(t1, t2, hue) * 255;
    b = hueToRgb(t1, t2, hue - 2) * 255;
    return { r: r, g: g, b: b };
  }

  /**
  * 将rgb颜色转hsl颜色
  * @param {Number} r 红光
  * @param {Number} g 绿光
  * @param {Number} b 蓝光
  * @returns 
  */
  static rgbToHsl(r, g, b) {
    let min, max, i, l, s, maxcolor, h, rgb = [];
    rgb[0] = r / 255;
    rgb[1] = g / 255;
    rgb[2] = b / 255;
    min = rgb[0];
    max = rgb[0];
    maxcolor = 0;
    for (i = 0; i < rgb.length - 1; i++) {
      if (rgb[i + 1] <= min) { min = rgb[i + 1]; }
      if (rgb[i + 1] >= max) { max = rgb[i + 1]; maxcolor = i + 1; }
    }
    if (maxcolor == 0) {
      h = (rgb[1] - rgb[2]) / (max - min);
    }
    if (maxcolor == 1) {
      h = 2 + (rgb[2] - rgb[0]) / (max - min);
    }
    if (maxcolor == 2) {
      h = 4 + (rgb[0] - rgb[1]) / (max - min);
    }
    if (isNaN(h)) { h = 0; }
    h = h * 60;
    if (h < 0) { h = h + 360; }
    l = (min + max) / 2;
    if (min == max) {
      s = 0;
    } else {
      if (l < 0.5) {
        s = (max - min) / (max + min);
      } else {
        s = (max - min) / (2 - max - min);
      }
    }
    s = s;
    return { h: h, s: s, l: l };
  }

  /**
   * 将rgb转换成hex
   * @param {Number} r 红光
   * @param {Number} g 绿光
   * @param {Number} b 蓝光
   * @param {Number} a 不透明度
   * @returns 
   */
  static rgbToHex(r, g, b, a) {
    let r16 = r.toString(16);
    let g16 = g.toString(16);
    let b16 = b.toString(16);
    if (r16.length == 1) {
      r16 = "0" + r16;
    }
    if (g16.length == 1) {
      g16 = "0" + g16;
    }
    if (b16.length == 1) {
      b16 = "0" + b16;
    }
    let hex = `#${r16}${g16}${b16}`;
    if (a !== undefined) {
      let a16 = Math.round(a * 255).toString(16);
      if (a16.length === 1) {
        a16 = "0" + a16;
      }
      hex += a16;
    }
    return hex.toUpperCase();
  }

  /**
   * 绘制HSL画布
   */
  #drawHSL() {

    const canvas = this.#byid("canvasHSL");
    const context = canvas.getContext("2d");
    const canvasWidth = parseInt(canvas.width);
    const canvasHeight = parseInt(canvas.height);
    const ox = canvasWidth / 2;             //圆心x
    const oy = canvasHeight / 2;            //圆心y
    const radWidth = 20;                    //弧宽
    const r0 = canvasWidth / 2 - radWidth;  //内圆半径
    const r1 = canvasWidth / 2;             //外圆半径
    const rectLeft = ox - 50;               //正方型的左边
    const rectTop = oy - 50;                //正方形的上边

    const radA = this.#color.H * (Math.PI / 180);
    const sinA = Math.sin(radA);
    const cosA = Math.cos(radA);

    let r, x, y, s, l;

    //重新设置高度，用于擦除原来绘制的内容
    canvas.height = canvasHeight;

    //根据角度决定颜色，密集的绘制扇形，最终绘制出一个彩色的大圆
    for (let i = 0; i < 360; i++) {
      context.attr("fillStyle", `hsl(${i},100%,50%)`)
        .do("beginPath")
        .do("moveTo", ox, oy)
        .do("arc", ox, oy, r1, i * (Math.PI / 180), (i + 2) * (Math.PI / 180))
        .do("fill");
    }

    //绘制H值的指针
    r = r0 + (r1 - r0) / 2;
    y = sinA * r;
    x = cosA * r;
    y = y + oy;
    x = x + ox;
    context.attr("lineWidth", 2)
      .attr("strokeStyle", "#fff")
      .do("beginPath")
      .do("arc", x, y, 10, 0, 2 * Math.PI)
      .do("closePath")
      .do("stroke");

    //绘制内圆，用于遮罩
    context.attr("fillStyle", "#fff")
      .do("beginPath")
      .do("moveTo", ox, oy)
      .do("arc", ox, oy, r0, 0, 2 * Math.PI)
      .do("fill");

    //绘制正方形
    for (s = 0; s < 100; s = s + 1) {
      x = rectLeft + s;
      for (l = 0; l < 100; l = l + 1) {
        y = rectTop + l;
        context.attr("fillStyle", `hsl(${this.#color.H},${s}%,${l}%)`)
          .do("beginPath", x, y)
          .do("rect", x, y, 1, 1)
          .do("fill");
      }
    }

    //绘制S和L值的指针
    s = this.#color.S + rectLeft;
    l = this.#color.L + rectTop;
    r = 7;
    context.attr("lineWidth", 1)
      .attr("strokeStyle", "#000")
      .do("beginPath")
      .do("arc", s, l, r, 0, 2 * Math.PI)
      .do("stroke")
      .attr("strokeStyle", "#fff")
      .do("beginPath")
      .do("arc", s, l, r - 1, 0, 2 * Math.PI)
      .do("stroke");

  }

  /**
   * 绘制饱和度画布
   */
  #drawSaturation() {

    const canvas = this.#byid("canvasSaturation");
    const width = canvas.width;
    const height = canvas.height;
    const ox = width / 2;
    const oy = height / 2;
    const pi = Math.PI;

    let h, s, l, r, a, b, c, x, y, A360, radA, sinA;
    canvas.height = height;  //重置
    let context = canvas.getContext("2d");

    //绘制色轮，角度代表色相H，半径代表亮度L,需要分三次绘制
    //亮度90以上，需要非常密集的绘制
    for (l = 100; l > 90; l = l - 1) {
      for (h = 0; h < 360; h = h + 12) {
        let color = `hsl(${h},${this.#color.S}%,${l}%)`;
        context.attr("fillStyle", color)
          .do("beginPath")
          .do("moveTo", ox, oy)
          .do("arc", ox, oy, l, h * (Math.PI / 180), (h + 12) * (Math.PI / 180))
          .do("fill");
      }
    }

    //亮度90以下，可以稍微绘制得稀松一点
    for (l = 90; l > 0; l = l - 10) {
      for (h = 0; h < 360; h = h + 12) {
        let color = `hsl(${h},${this.#color.S}%,${l}%)`;
        context.attr("fillStyle", color)
          .do("beginPath")
          .do("moveTo", ox, oy)
          .do("arc", ox, oy, l, h * (Math.PI / 180), (h + 12) * (Math.PI / 180))
          .do("fill");
      }
    }

    //给色轮最外围的白色区域绘制一个边框
    context.attr("lineWidth", 1, "strokeStyle", "lightgray")
      .do("beginPath")
      .do("arc", ox, oy, 100.5, 0, 2 * Math.PI)
      .do("stroke");

    //绘制H和L值的指针
    h = this.#color.H;
    s = this.#color.S;
    l = this.#color.L;
    r = 7;

    //右下
    if (h >= 0 && h <= 90) {
      c = l;                        //斜边长度等于亮度
      A360 = h;                     //角度等于色相
      radA = A360 * pi / 180;       //弧度
      sinA = Math.sin(radA);        //求sin(A)
      a = sinA * c;                 //求角A的对边
      b = Math.sqrt(c * c - a * a); //根据勾股定理求b
      x = ox + b;
      y = oy + a;
    }

    //左下
    else if (h >= 90 && h <= 180) {
      c = l;
      A360 = h - 90;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox - a;
      y = oy + b;
    }

    //左上
    else if (h >= 180 && h <= 270) {
      c = l;
      A360 = h - 180;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox - b;
      y = oy - a;
    }

    //右上
    else if (h >= 270 && h <= 360) {
      c = l;
      A360 = 360 - h;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox + b;
      y = oy - a;
    }

    //绘制指针
    context.attr("strokeWidth", 1)
      .attr("strokeStyle", "#000000")
      .do("beginPath")
      .do("arc", x, y, r, 0, 2 * pi)
      .do("stroke")
      .attr("strokeStyle", "#ffffff")
      .do("beginPath")
      .do("arc", x, y, r - 1, 0, 2 * pi)
      .do("stroke");

    //设置饱和度进度条的值
    let range = this.#byid("rangeSaturation");
    range.value = this.#color.S;
    range.style.backgroundImage = `
      linear-gradient(
        to right,hsl(${this.#color.H},0%,${this.#color.L}%) 0%,
        hsl(${this.#color.H},100%,${this.#color.L}%) 100%
      )`;

  }

  /**
   * 绘制亮度画布
   */
  #drawLightness() {

    //重置画布
    let canvas = this.#byid("canvasLightness");
    const width = canvas.width;
    const height = canvas.height;
    const ox = width / 2;
    const oy = height / 2;
    const pi = Math.PI;

    let h, s, l, r, a, b, c, x, y, A360, radA, sinA;
    canvas.height = height;  //重置
    let context = canvas.getContext("2d");

    //绘制色轮
    for (s = 100; s > 0; s = s - 10) {
      for (h = 0; h < 360; h = h + 12) {
        let color = `hsl(${h},${s}%,${this.#color.L}%)`;
        context.attr("fillStyle", color)
          .do("beginPath")
          .do("moveTo", ox, oy)
          .do("arc", ox, oy, s, h * (Math.PI / 180), (h + 12.5) * (Math.PI / 180))
          .do("fill");
      }
    }

    //给色轮最外围的白色区域绘制一个边框
    context.attr("lineWidth", 1)
      .attr("strokeStyle", "lightgray")
      .do("beginPath")
      .do("arc", ox, oy, 100.5, 0, 2 * Math.PI)
      .do("stroke");

    //绘制H和L值的指针
    h = this.#color.H;
    s = this.#color.S;
    l = this.#color.L;
    r = 7;

    //右下
    if (h >= 0 && h <= 90) {
      c = s;                        //斜边长度等于饱和度
      A360 = h;                     //角度等于色相
      radA = A360 * pi / 180;       //弧度
      sinA = Math.sin(radA);        //求sin(A)
      a = sinA * c;                 //求角A的对边
      b = Math.sqrt(c * c - a * a); //根据勾股定理求b
      x = ox + b;
      y = oy + a;
    }

    //左下
    else if (h >= 90 && h <= 180) {
      c = s;
      A360 = h - 90;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox - a;
      y = oy + b;
    }

    //左上
    else if (h >= 180 && h <= 270) {
      c = s;
      A360 = h - 180;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox - b;
      y = oy - a;
    }

    //右上
    else if (h >= 270 && h <= 360) {
      c = s;
      A360 = 360 - h;
      radA = A360 * pi / 180;
      sinA = Math.sin(radA);
      a = sinA * c;
      b = Math.sqrt(c * c - a * a);
      x = ox + b;
      y = oy - a;
    }

    //绘制指针
    context.attr("strokeWidth", 1)
      .attr("strokeStyle", "#000000")
      .do("beginPath")
      .do("arc", x, y, r, 0, 2 * pi)
      .do("stroke")
      .attr("strokeStyle", "#ffffff")
      .do("beginPath")
      .do("arc", x, y, r - 1, 0, 2 * pi)
      .do("stroke");

    //设置亮度进度条的值
    let range = this.#byid("rangeLightness");
    range.value = this.#color.L;
    range.style.backgroundImage = `
      linear-gradient(
        to right,
        hsl(${this.#color.H},${this.#color.S}%,0%) 0%,hsl(${this.#color.H},${this.#color.S}%,50%) 50%,
        hsl(${this.#color.H},${this.#color.S}%,50%) 50%,hsl(${this.#color.H},${this.#color.S}%,100%) 100%
      )`;

  }

  /**
   * 渲染控件
   */
  #render() {

    this.#root.innerHTML = Color6.style + Color6.html;

    //标准颜色
    let standardHtml = "";
    for (let row of Color6.standardColors) {
      standardHtml += "<div>"
      for (let column of row) {
        standardHtml += `<span hex="${column}" style="background-color:${column};"></span>`;
      }
      standardHtml += "</div>"
    }
    this.#byid("standard").innerHTML = standardHtml;

  }

  /**
   * 事件监听
   */
  #listen() {

    //鼠标在hsl画布上移动
    this.#byid("canvasHSL").onmousemove = event => {
      const canvas = event.target;
      const width = parseInt(canvas.width);
      const height = parseInt(canvas.height);
      const ox = width / 2;             //圆心x
      const oy = height / 2;            //圆心y
      const radWidth = 20;              //弧宽
      const r0 = width / 2 - radWidth;  //内圆半径
      const r1 = width / 2;             //外圆半径
      const rectR = 50;
      const rectSize = rectR * 2;       //内接正方形的边长
      const rectLeft = ox - rectR;
      const rectTop = oy - rectR;
      //用勾股定理求直角三角形的三条边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;
      const r = Math.sqrt(x * x + y * y);
      //改变鼠标的形状
      if (r >= r0 && r <= r1
        || offsetX >= rectLeft && offsetX <= rectLeft + rectSize && offsetY >= rectTop && offsetY <= rectTop + rectSize) {
        canvas.style.cursor = "crosshair";
      } else {
        canvas.style.cursor = "not-allowed";
      }
    }

    //鼠标在hsl画布上移动
    this.#byid("canvasSaturation").onmousemove = event => {
      const canvas = event.target;
      const width = parseInt(canvas.width);
      const height = parseInt(canvas.height);
      const ox = width / 2;             //圆心x
      const oy = height / 2;            //圆心y
      const r1 = width / 2;             //外圆半径
      //用勾股定理求直角三角形的三条边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;
      const r = Math.sqrt(x * x + y * y);
      //改变鼠标的形状
      if (r <= r1) {
        canvas.style.cursor = "crosshair";
      } else {
        canvas.style.cursor = "not-allowed";
      }
    }

    //鼠标在hsl画布上移动
    this.#byid("canvasLightness").onmousemove = event => {
      const canvas = event.target;
      const width = parseInt(canvas.width);
      const height = parseInt(canvas.height);
      const ox = width / 2;             //圆心x
      const oy = height / 2;            //圆心y
      const r1 = width / 2;             //外圆半径
      //用勾股定理求直角三角形的三条边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;
      const r = Math.sqrt(x * x + y * y);
      //改变鼠标的形状
      if (r <= r1) {
        canvas.style.cursor = "crosshair";
      } else {
        canvas.style.cursor = "not-allowed";
      }
    }

    //鼠标在hsl画布上点击
    this.#byid("canvasHSL").onclick = event => {

      const canvas = event.target;
      const width = parseInt(canvas.getAttribute("width"));
      const height = parseInt(canvas.getAttribute("height"));
      const ox = width / 2;           //圆心x
      const oy = height / 2;          //圆心y
      const radWidth = 20;          //弧宽
      const r0 = width / 2 - radWidth;  //内圆半径
      const r1 = width / 2;           //外圆半径
      const rectR = 50;
      const rectSize = rectR * 2;              //内接正方形的边长
      const rectLeft = ox - rectR;
      const rectTop = oy - rectR;

      //用勾股定理求直角三角形的三条边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;
      const r = Math.sqrt(x * x + y * y);

      //斜边即使半径，半径大于等于小圆半径且小于等于大圆半径，即为点击了彩色的环形区域
      if (r >= r0 && r <= r1) {

        let sin = y / r;  //求正弦
        let rad = Math.asin(sin); //求弧度
        let a = rad / (Math.PI / 180);  //求角度

        //如果位于左下角：a = 180 -a
        if (offsetX <= ox && offsetY >= oy) {
          a = 180 - a;
        }

        //如果位于左上角a = 0 - (a-180)
        else if (offsetX <= ox && offsetY <= oy) {
          a = 0 - (a - 180);
        }

        //如果位于右上角a = a+360
        else if (offsetX >= ox && offsetY <= oy) {
          a = a + 360;
        }

        this.#color.H = parseInt(a);
        this.#drawHSL();

        let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
        this.#color.R = Math.floor(rgb.r);
        this.#color.G = Math.floor(rgb.g);
        this.#color.B = Math.floor(rgb.b);
        this.#setHEX();
        this.#setDemo();

      }

      else if (offsetX >= rectLeft && offsetX <= rectLeft + rectSize && offsetY >= rectTop && offsetY <= rectTop + rectSize) {
        let s = offsetX - rectLeft;
        let l = offsetY - rectTop;
        this.#color.S = parseInt(s);
        this.#color.L = parseInt(l);
        this.#drawHSL();
        let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
        this.#color.R = Math.floor(rgb.r);
        this.#color.G = Math.floor(rgb.g);
        this.#color.B = Math.floor(rgb.b);
        this.#setHEX();
        this.#setDemo();
      }

    }

    //输入rgb值
    this.#byid("rgb").oninput = event => {
      let target = event.target;
      if (target === this.#byid("numberR") || target === this.#byid("rangeR")) {
        this.#color.R = parseInt(target.value);
      }
      else if (target === this.#byid("numberG") || target === this.#byid("rangeG")) {
        this.#color.G = parseInt(target.value);
      }
      else if (target === this.#byid("numberB") || target === this.#byid("rangeB")) {
        this.#color.B = parseInt(target.value);
      }
      else {
        return;
      }
      this.#setRGB();
      let hsl = Color6.rgbToHsl(this.#color.R, this.#color.G, this.#color.B);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);
      this.#setHEX();
      this.#setDemo();
    }

    //输入十六进制值
    this.#byid("textHEX").onchange = event => {
      let value = event.target.value;
      let ok = this.#readColor(value);
      if (ok) {
        let t = this.#colorType;
        if (t === "hsl") {
          this.#drawHSL();
        }
        else if (t === "rgb") {
          this.#setRGB();
        }
        else if (t === "base") {

        }
        else if (t === "saturation") {
          this.#drawSaturation();
        }
        else if (t === "lightness") {
          this.#drawLightness();
        }
        this.#setHEX();
        this.#setA();
        this.#setDemo();
      }
    }

    //输入透明度
    this.#byid("rangeA").oninput = event => {
      this.#color.A = parseFloat(event.target.value);
      this.#setDemo();
    }

    //点击标准颜色
    this.#byid("standard").onclick = event => {
      if (event.target instanceof HTMLSpanElement) {
        let value = event.target.getAttribute("hex");
        let r16 = value.substr(1, 2)
        let g16 = value.substr(3, 2);
        let b16 = value.substr(5, 2);
        this.#color.R = parseInt(r16, 16);
        this.#color.G = parseInt(g16, 16);
        this.#color.B = parseInt(b16, 16);
        let hsl = Color6.rgbToHsl(this.#color.R, this.#color.G, this.#color.B);
        this.#color.H = Math.floor(hsl.h);
        this.#color.S = Math.floor(hsl.s * 100);
        this.#color.L = Math.floor(hsl.l * 100);
        this.#setHEX();
        this.#setDemo();
      }
    }

    //点击常用颜色
    this.#byid("lately").onclick = event => {
      if (!event.target instanceof HTMLSpanElement) {
        return;
      }

      let value = event.target.getAttribute("color");
      let r16 = value.substr(1, 2)
      let g16 = value.substr(3, 2);
      let b16 = value.substr(5, 2);
      this.#color.R = parseInt(r16, 16);
      this.#color.G = parseInt(g16, 16);
      this.#color.B = parseInt(b16, 16);
      let hsl = Color6.rgbToHsl(this.#color.R, this.#color.G, this.#color.B);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);

      switch (this.#colorType) {
        case "hsl":
          this.#drawHSL();
          break;
        case "rgb":
          this.#setRGB();
          break;
        case "saturation":
          this.#drawSaturation();
          break;
        case "lightness":
          this.#drawLightness();
          break;
        default:
          break;
      }

      this.#setHEX();
      this.#setDemo();

    }

    //输入饱和度色轮的饱和度
    this.#byid("rangeSaturation").oninput = event => {
      this.#color.S = parseInt(event.target.value);
      let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);
      this.#setHEX();
      this.#drawSaturation();
      this.#setDemo();
    }

    //输入亮度色轮的亮度
    this.#byid("rangeLightness").oninput = event => {
      this.#color.L = parseInt(event.target.value);
      let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);
      this.#setHEX();
      this.#drawLightness();
      this.#setDemo();
    }

    //在饱和度色轮上单击鼠标
    this.#byid("canvasSaturation").onclick = event => {

      const canvas = event.target;
      const width = canvas.width;
      const height = canvas.height;
      const ox = width / 2;
      const oy = height / 2;
      const r1 = width / 2;

      //求直角三角形的两个直角边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;

      //勾股定理：斜边的平方=两条直角边的平方和
      const r = Math.sqrt(x * x + y * y);

      //斜边即是半径，半径大于大圆半径则超出了色轮的范围
      if (r > r1) {
        return;
      }

      const sin = y / r;  //求正弦
      const rad = Math.asin(sin); //求弧度
      let a = rad / (Math.PI / 180);  //求角度

      //如果位于左下角：a = 180 -a
      if (offsetX <= ox && offsetY >= oy) {
        a = 180 - a;
      }
      //如果位于左上角a = 0 - (a-180)
      else if (offsetX <= ox && offsetY <= oy) {
        a = 0 - (a - 180);
      }
      //如果位于右上角a = a+360
      else if (offsetX >= ox && offsetY <= oy) {
        a = a + 360;
      }

      this.#color.H = parseInt(a);
      this.#color.L = parseInt(r);

      let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);

      this.#drawSaturation();
      this.#setHEX();
      this.#setDemo();

    }

    //在亮度色轮上单击鼠标
    this.#byid("canvasLightness").onclick = event => {

      const canvas = event.target;
      const width = canvas.width;
      const height = canvas.height;
      const ox = width / 2;
      const oy = height / 2;
      const r1 = width / 2;

      //求直角三角形的两个直角边
      const offsetX = event.offsetX;
      const offsetY = event.offsetY;
      const x = offsetX - ox;
      const y = offsetY - oy;

      //勾股定理：斜边的平方=两条直角边的平方和
      const r = Math.sqrt(x * x + y * y);

      //斜边即是半径，半径大于大圆半径则超出了色轮的范围
      if (r > r1) {
        return;
      }

      const sin = y / r;  //求正弦
      const rad = Math.asin(sin); //求弧度
      let a = rad / (Math.PI / 180);  //求角度

      //如果位于左下角：a = 180 -a
      if (offsetX <= ox && offsetY >= oy) {
        a = 180 - a;
      }
      //如果位于左上角a = 0 - (a-180)
      else if (offsetX <= ox && offsetY <= oy) {
        a = 0 - (a - 180);
      }
      //如果位于右上角a = a+360
      else if (offsetX >= ox && offsetY <= oy) {
        a = a + 360;
      }

      this.#color.H = parseInt(a);
      this.#color.S = parseInt(r);

      let rgb = Color6.hslToRgb(this.#color.H, this.#color.S / 100, this.#color.L / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);

      this.#drawLightness();
      this.#setHEX();
      this.#setDemo();

    }

    //选项卡
    this.#byid("nav").onclick = event => {

      let target = event.target;
      if (!target.classList.contains("tab")) return;

      let t = target.getAttribute("t");
      this.#qa(".tab").forEach(item => item.classList.remove("tab-active"));
      target.classList.add("tab-active");

      this.#qa(".tab-content").forEach(item => item.style.display = item.id === t ? "block" : "none");
      this.#colorType = t;
      if (t === "hsl") {
        this.#drawHSL();
      }
      else if (t === "rgb") {
        this.#setRGB();
      }
      else if (t === "base") {

      }
      else if (t === "saturation") {
        this.#drawSaturation();
      }
      else if (t === "lightness") {
        this.#drawLightness();
      }

    }

    //点击取消按钮
    this.#byid("buttonCancle").onclick = () => this.style.display = "none";

    //点击吸管按钮
    if (!window.EyeDropper) {
      this.#byid("buttonGetColor").style.display = "none";
    }
    else {
      this.#byid("buttonGetColor").onclick = async () => {
        const eyeDropper = new EyeDropper() // 初始化一个EyeDropper对象
        try {
          const result = await eyeDropper.open() // 开始拾取颜色
          this.#readColor(result.sRGBHex);
          let t = this.#colorType;
          if (t === "hsl") {
            this.#drawHSL();
          }
          else if (t === "rgb") {
            this.#setRGB();
          }
          else if (t === "base") {

          }
          else if (t === "saturation") {
            this.#drawSaturation();
          }
          else if (t === "lightness") {
            this.#drawLightness();
          }
          this.#setHEX();
          this.#setDemo();
        } catch (e) { }
      }
    }

  }

  /**
   * 读取颜色值，并更新控件
   * @param {*} colorValue 颜色值，支持hex,hexa,rgb,rgba,hsl,hsla六种格式
   * @returns 
   */
  #readColor(colorValue) {
    let ok = false;
    if (Color6.regExp.hsla.test(colorValue)) {
      colorValue = colorValue.split("(")[1];
      colorValue = colorValue.split(")")[0];
      let arr = colorValue.split(",").map(item => item.trim());
      let h = parseInt(arr[0]);
      let s = parseInt(arr[1].substring(0, arr[1].length - 2));
      let l = parseInt(arr[2].substring(0, arr[2].length - 2));
      let a = parseFloat(arr[3]);
      if (h < 0 || h > 360) {
        ok = false;
        return;
      }
      if (s < 0 || s > 100) {
        ok = false;
        return;
      }
      if (l < 0 || l > 100) {
        ok = false;
        return;
      }
      if (a < 0 || a > 1) {
        ok = false;
        return;
      }
      this.#color.H = h;
      this.#color.S = s;
      this.#color.L = l;
      this.#color.A = a;
      let rgb = Color6.hslToRgb(h, s / 100, l / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);
      ok = true;
    }
    else if (Color6.regExp.rgba.test(colorValue)) {
      //rgba(0,0,0,.5)
      colorValue = colorValue.split("(")[1];
      colorValue = colorValue.split(")")[0];
      let arr = colorValue.split(",").map(item => item.trim());
      let r = parseInt(arr[0]);
      let g = parseInt(arr[1]);
      let b = parseInt(arr[2]);
      let a = parseFloat(arr[3]);
      if (r < 0 || r > 255) {
        ok = false;
        return;
      }
      if (g < 0 || g > 255) {
        ok = false;
        return;
      }
      if (b < 0 || b > 255) {
        ok = false;
        return;
      }
      if (a < 0 || a > 1) {
        ok = false;
        return;
      }
      this.#color.R = r;
      this.#color.G = g;
      this.#color.B = b;
      this.#color.A = a;
      let hsl = Color6.rgbToHsl(r, g, b);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);
      ok = true;
    }
    else if (Color6.regExp.hexa.test(colorValue)) {
      //#00aaff00
      let r16 = colorValue.substr(1, 2)
      let g16 = colorValue.substr(3, 2);
      let b16 = colorValue.substr(5, 2);
      let a16 = colorValue.substr(7, 2);
      let r = parseInt(r16, 16);
      let g = parseInt(g16, 16);
      let b = parseInt(b16, 16);
      let a = parseInt(a16, 16) / 255;
      if (r < 0 || r > 255) {
        ok = false;
        return;
      }
      if (g < 0 || g > 255) {
        ok = false;
        return;
      }
      if (b < 0 || b > 255) {
        ok = false;
        return;
      }
      if (a < 0 || a > 1) {
        ok = false;
        return;
      }
      this.#color.R = r;
      this.#color.G = g;
      this.#color.B = b;
      this.#color.A = a;
      let hsl = Color6.rgbToHsl(r, g, b);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);
      ok = true;
    }
    else if (Color6.regExp.hsl.test(colorValue)) {
      //hsl(100,50%,50%)
      colorValue = colorValue.split("(")[1];
      colorValue = colorValue.split(")")[0];
      let arr = colorValue.split(",").map(item => item.trim());
      let h = parseInt(arr[0]);
      let s = parseInt(arr[1].substring(0, arr[1].length - 2));
      let l = parseInt(arr[2].substring(0, arr[2].length - 2));
      if (h < 0 || h > 360) {
        ok = false;
        return;
      }
      if (s < 0 || s > 100) {
        ok = false;
        return;
      }
      if (l < 0 || l > 100) {
        ok = false;
        return;
      }
      this.#color.H = h;
      this.#color.S = s;
      this.#color.L = l;
      let rgb = Color6.hslToRgb(h, s / 100, l / 100);
      this.#color.R = Math.floor(rgb.r);
      this.#color.G = Math.floor(rgb.g);
      this.#color.B = Math.floor(rgb.b);
      ok = true;
    }
    else if (Color6.regExp.rgb.test(colorValue)) {
      //rgb(0,0,0)
      colorValue = colorValue.split("(")[1];
      colorValue = colorValue.split(")")[0];
      let arr = colorValue.split(",").map(item => item.trim());
      let r = parseInt(arr[0]);
      let g = parseInt(arr[1]);
      let b = parseInt(arr[2]);
      if (r < 0 || r > 255) {
        ok = false;
        return;
      }
      if (g < 0 || g > 255) {
        ok = false;
        return;
      }
      if (b < 0 || b > 255) {
        ok = false;
        return;
      }
      this.#color.R = r;
      this.#color.G = g;
      this.#color.B = b;
      let hsl = Color6.rgbToHsl(r, g, b);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);
      ok = true;
    }
    else if (Color6.regExp.hex.test(colorValue)) {
      //#00aaff
      let r16 = colorValue.substr(1, 2)
      let g16 = colorValue.substr(3, 2);
      let b16 = colorValue.substr(5, 2);
      let r = parseInt(r16, 16);
      let g = parseInt(g16, 16);
      let b = parseInt(b16, 16);
      if (r < 0 || r > 255) {
        ok = false;
        return;
      }
      if (g < 0 || g > 255) {
        ok = false;
        return;
      }
      if (b < 0 || b > 255) {
        ok = false;
        return;
      }
      this.#color.R = r;
      this.#color.G = g;
      this.#color.B = b;
      let hsl = Color6.rgbToHsl(r, g, b);
      this.#color.H = Math.floor(hsl.h);
      this.#color.S = Math.floor(hsl.s * 100);
      this.#color.L = Math.floor(hsl.l * 100);
      ok = true;
    }
    return ok;
  }

  /**
   * 设置rgb控件的值
   */
  #setRGB() {
    this.#byid("numberR").value = this.#color.R;
    this.#byid("numberG").value = this.#color.G;
    this.#byid("numberB").value = this.#color.B;
    this.#byid("rangeR").value = this.#color.R;
    this.#byid("rangeG").value = this.#color.G;
    this.#byid("rangeB").value = this.#color.B;
  }

  /**
   * 设置16进制控件的值
   */
  #setHEX() {
    let hex = Color6.rgbToHex(this.#color.R, this.#color.G, this.#color.B);
    this.#byid("textHEX").value = hex;
  }

  /**
   * 设置示例的值
   */
  #setDemo() {
    let demo = this.#byid("demo");
    demo.style.backgroundColor = this.getColor().hexa;
  }

  /**
   * 设置透明度控件的值
   */
  #setA() {
    this.#byid("rangeA").value = this.#color.A;
  }

  /**
   * 读取常用颜色
   */
  #readLatelyColor() {
    let lately = localStorage.getItem(Color6.localStrorageKey);
    let latelyColors = [];
    if (lately) {
      let values = lately.split("|");
      for (let v of values) {
        if (latelyColors.length < 10) {
          latelyColors.push(v);
        }
      }
    }
    let i = 0;
    while (latelyColors.length < 10) {
      latelyColors.push(Color6.latelyColors[i]);
      i++;
    }

    let latelyHtml = latelyColors.map(item => `<span color="${item}" style="background-color:${item};"></span>`).join("");
    this.#byid("lately").innerHTML = latelyHtml;
  }

  /**
   * 存储常用颜色
   */
  #saveLatelyColor() {
    let colorValue = Color6.rgbToHex(this.#color.R, this.#color.G, this.#color.B);
    let latelyArray = [colorValue];
    let latelySave = localStorage.getItem(Color6.localStrorageKey);
    if (latelySave) {
      let arr = latelySave.split("|");
      for (let item of arr) {
        if (latelyArray.length < 10) {
          latelyArray.push(item);
        }
      }
    }
    localStorage.setItem(Color6.localStrorageKey, latelyArray.join("|"));
  }

  /**
   * 显示颜色控件
   * @param {*} options {sender:"目标控件",value:"初始颜色值",format:"色值类型",onchose:(color)=>{}}
   */
  open(options) {
    //如果从在没有打开过本控件，则渲染
    if (!this.#rendered) {
      this.#render();
      this.#listen();
      this.#rendered = true;
    }
    this.style.display = "block";

    //解构参数
    let { sender, value, format, onchose } = options;

    //控件定位
    let left = 0;
    let top = 0;
    let scrollTop = document.documentElement.scrollTop;   //文档上面被卷去的高度
    let scrollLeft = document.documentElement.scrollLeft; //文档左侧被卷去的距离
    if (sender) {
      //计算触发控件相对于视窗的位置
      let rect = sender.getBoundingClientRect();
      left = rect.left;
      top = rect.bottom + 1;
      //根据文档的滚动条微调位置
      left += scrollLeft;
      top += scrollTop
    }
    this.style.left = left + "px";
    this.style.top = top + "px";

    //读取颜色值
    let ok = this.#readColor(value);
    if (!ok) {
      this.#color.H = 0;
      this.#color.S = 100;
      this.#color.L = 50;
      this.#color.R = 255;
      this.#color.G = 0;
      this.#color.B = 0;
      this.#color.A = 1;
    }

    this.#drawHSL();
    this.#setA();
    this.#setHEX();
    this.#setDemo();

    //配置常用颜色
    this.#readLatelyColor();

    //绑定确定按钮的事件
    if (onchose) {

      this.#byid("buttonConfirm").onclick = () => {

        let colorValue = "";
        if (format === "rgb") {
          if (this.#color.A == 1) {
            colorValue = `rgb(${this.#color.R},${this.#color.G},${this.#color.B})`;
          } else {
            colorValue = `rgba(${this.#color.R},${this.#color.G},${this.#color.B},${this.#color.A})`;
          }
        }
        else if (format === "hsl") {
          if (this.#color.A == 1) {
            colorValue = `hsl(${this.#color.H},${this.#color.S}%,${this.#color.L}%)`;
          } else {
            colorValue = `hsl(${this.#color.H},${this.#color.S}%,${this.#color.L}%,${this.#color.A})`;
          }
        }
        else {
          if (this.#color.A == 1) {
            colorValue = Color6.rgbToHex(this.#color.R, this.#color.G, this.#color.B);
          } else {
            colorValue = Color6.rgbToHex(this.#color.R, this.#color.G, this.#color.B, this.#color.A);
          }
        }
        onchose(colorValue);

        //写入localStorage
        this.#saveLatelyColor();

        this.style.display = "none";

      }
    }

    else {
      this.#byid("buttonConfirm").onclick = () => {
        this.style.display = "none";
      }
    }


  }

}